<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>会员信息</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="./css/information.css" >
</head>

<body>
    <!-- 最上方logo -->
    <div id="app">
        <div id="top">
            <div id="logo">
                <p>
                    <span>禧创OCP</span>
                </p>
                <p>
                    <span>全渠道数字平台</span>
                </p>
            </div>
            <div id="exit">
                <!-- 下拉餐单 -->
                <el-dropdown>
                    <span class="el-dropdown-link" style="color: white;">
                        <i class="el-icon-user-solid">admin</i>
                    </span>
                    <!-- 后续连数据库 -->
                    <el-dropdown-menu trigger="click">
                        <el-dropdown-item>水热事业部</el-dropdown-item>
                        <el-dropdown-item>厨电事业部</el-dropdown-item>
                        <el-dropdown-item>热能事业部</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                &nbsp;
                <i class="el-icon-switch-button" style="color: white;"></i>
            </div>
        </div>
        <!-- 会员基本信息 -->
        <div id="basic">
            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1" @click="homepage">首页 </el-menu-item>
                <el-menu-item index="2" @click="subAccount">子账号管理</el-menu-item>
                <el-menu-item index="3" @click="AccountMeaasge">账户信息</el-menu-item>
                <el-menu-item index="4" @click="motifyPass">修改密码</el-menu-item>
                <el-menu-item index="5"  @click="information">会员信息</el-menu-item>
            </el-menu>
            <!-- 会员基本信息表格 -->
            <el-table :data="tableData1" border style="width: 100%">
                <el-table-column prop="name" label="名称" width="550">
                </el-table-column>
                <el-table-column prop="message" label="信息" width="550">
                </el-table-column>
            </el-table>
        </div>
        <!-- 收货信息 -->
        <div id="Receipt">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="5"><a href="">收货信息</a></el-menu-item>
            </el-menu>
            <!-- 收货信息 -->
            <template>
                <el-table :data="tableData2" border height="210px" style="border:1px solid darkgrey" size="mini"
                    :fit="false" :header-cell-style="{background:'#979494',color:'#fff'}">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="70px"></el-table-column>
                    <el-table-column prop="contactName" label="联系人" align="center" width="140px"></el-table-column>
                    <el-table-column prop="contactPhone" label="联系电话" align="center" width="140px"></el-table-column>
                    <el-table-column prop="addressInformation" label="收货地址" align="center" width="140px"></el-table-column>
                    <el-table-column prop="companyName" label="收货单位" align="center" width="140px"></el-table-column>
                    <el-table-column prop="idNumber" label="身份证" align="center" width="140px"></el-table-column>
                    <el-table-column prop="remarks" label="备注" align="center" width="100px"></el-table-column>
                    <el-table-column prop="isDefault" label="是否为默认地址" align="center" width="178px"></el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="40"
                        layout="sizes, prev, pager, next, jumper" :total="1000">
                    </el-pagination>
                </div>
            </template>
        </div>
        <!-- 侧边导航栏 -->
        <div id="left">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#989494" text-color="white">
                <el-submenu index="1">
                    <template slot="title">
                        <span>订单管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">提交订单</el-menu-item>
                        <el-menu-item index="1-2">待处理订单</el-menu-item>
                        <el-menu-item index="1-3">采购订单</el-menu-item>
                        <el-menu-item index="1-4">零售订单列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <span>售后管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
                        <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <span>产品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1">产品信息查询</el-menu-item>
                        <el-menu-item index="3-2">库存信息管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <span>会员信息</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="information">会员信息</el-menu-item>
                        <el-menu-item index="4-2" @click="motifyPass">修改密码</el-menu-item>
                        <el-menu-item index="4-3" @click="AccountMeaasge">账号信息</el-menu-item>
                        <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <span>设置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">网店设置</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</body>
<script type="module">
    var path=decodeURI(location.href);
    //返回某个指定的字符串值首次出现的位置
    var num=path.indexOf("?");
    var str=path.substr(num+1);
    //$("#loginId").html(str);
    console.log(path);
    console.log(num);
    console.log(str);
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '5',
                dealerId:"1",
                activeIndex2: '5',
                tableData1: [{
                    name: '经销商名称：',
                    message: '',
                }, {
                    name: '经销商编码：',
                    message: '',
                }, {
                    name: '经销商简称：',
                    message: '',
                }, {
                    name: '机构名称：',
                    message: '',
                }, {
                    name: '经销商类别：',
                    message: '',
                }],
                tableData2: [],
            };
        },
        created(){
            this.getAddress();
            this.getMember();
        },
        methods: {
            //分页功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            currentPage4(){
                console.log(key, keyPath);
            },
            //跳转
            information(){
                location.href="http://localhost:8088/information?"+str;
            },
            motifyPass(){
                location.href="http://localhost:8088/motifypass?"+str;
            },
            AccountMeaasge()
            {
                console.log("-=--------------------------------str"+str);
                location.href="http://localhost:8088/AccountMeaasge?"+str;
            },
            homepage(){
                location.href="http://localhost:8088/homepage?"+str;
            },
            //获取住址信息
            getAddress(){
                let url="http://localhost:8088/address/getAddress/?"+"dealerId="+str;
                console.log(url);
                axios.get(url)
                    .then(result=>{
                        if (result.data.code=="001"){
                            console.log(result.data.data);
                            this.tableData2=result.data.data;
                        }
                        else {
                            console.log(result.data.code);
                        }
                    })
            },
        //    获取会员信息
            getMember(){
                console.log("我运行啦！========>"+str);
                let url="http://localhost:8088/system/member/getMember?"+"dealerId="+str;
                axios.get(url)
                    .then(result=>{
                        if (result.data.code=="001"){
                            console.log(result.data.data);
                            this.tableData1[0].message=result.data.data.dealerName;
                            this.tableData1[1].message=result.data.data.memberId;
                            this.tableData1[2].message=result.data.data.dealerAbbreviation;
                            this.tableData1[3].message=result.data.data.organizationName;
                            this.tableData1[4].message=result.data.data.dealerCategory;
                        }
                        else {
                            console.log(result.data.code);
                        }
                    })
            },
            currentPage(){
                console.log(key, keyPath);
            },

        },
    });
</script>

</html>